<template>
  <el-dialog
    v-el-drag-dialog
    :title="type==='get'?'出库明细':'入库明细'"
    :visible.sync="visible"
    width="800px"
    append-to-body
    @close="reset"
  >
    <div style="width: 100%;">
      <el-table v-if="type==='get'" :data="tableData" max-height="400" style="width: 100%;">
        <el-table-column prop="specName" label="型号" width="180">
          <template slot-scope="scope">
            {{ scope.row.specName }}*{{ scope.row.gdCount }}
          </template>
        </el-table-column>
        <el-table-column prop="orderCode" label="订单号" width="180" />
        <el-table-column prop="orderStatus" label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus===1">正常</span>
            <span v-if="scope.row.orderStatus===2 || scope.row.orderStatus===13" style="color: #F56C6C;">虚拟</span>
            <span v-if="scope.row.orderStatus!==1&&scope.row.orderStatus!==2&&scope.row.orderStatus!==13">已退单</span>
          </template>
        </el-table-column>
        <el-table-column prop="errorTime" label="异常时间">
          <template slot-scope="scope">
            {{
              scope.row.modifyTime&&scope.row.orderStatus===0
                ? parseTime(scope.row.modifyTime, "{y}-{m}-{d} {h}:{i}")
                : "-" }}
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="type==='return'" :data="detailList" style="width: 100%;" max-height="200">
        <el-table-column prop="specName" label="型号" width="130">
          <template slot-scope="scope">
            {{ scope.row.specName }}*{{ scope.row.gdCount }}
          </template>
        </el-table-column>
        <el-table-column prop="orderCode" label="订单号" width="150" />
        <el-table-column prop="returnType" label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.returnType===1">正常</span>
            <span v-if="scope.row.returnType===2 || scope.row.returnType===13" style="color: #F56C6C;">虚拟</span>
            <span v-if="scope.row.returnType!==1&&scope.row.returnType!==2&&scope.row.returnType!==13">已退单</span>
          </template>
        </el-table-column>
        <el-table-column prop="returnType" label="还瓶类型">
          <template slot-scope="scope">
            {{ scope.row.returnType === 1 ? '空瓶' : '重瓶' }}
          </template>
        </el-table-column>
        <el-table-column prop="realCount" label="实际还瓶" />
        <el-table-column prop="recChipIDS" label="空瓶号" />
        <el-table-column prop="newChipIDS" label="重瓶号" />
      </el-table>
      <div v-if="type==='return' && excepList.length > 0" class="title">异常记录</div>
      <el-table v-if="type==='return' && excepList.length > 0" :data="excepList" max-height="200" style="width: 100%;">
        <el-table-column prop="specName" label="型号" width="130">
          <template slot-scope="scope">
            {{ scope.row.specName }}
          </template>
        </el-table-column>
        <el-table-column prop="orderCode" label="订单号" width="150" />
        <el-table-column prop="returnStatus" label="类型">
          <template slot-scope="scope">
            {{ scope.row.returnStatus === 1 ? '少还-新租瓶' : scope.row.returnStatus === 3 ? '少还-自有瓶' : '多还' }}
          </template>
        </el-table-column>
        <el-table-column prop="gCount" label="数量" />
        <el-table-column prop="remark" label="原因" />
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      合计：{{ remark }}
    </div>
  </el-dialog>
</template>

<script>
  import { callarBottledetail, queryReturnBottledetail } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'

  export default {
    name: 'detail',
    props: {
      type: {
        type: String
      }
    },
    data() {
      return {
        parseTime,
        visible: false,
        tableData: [],
        detailList: [],
        excepList: [],
        billStatusMap: [
          {
            value: 1,
            desc: '出库中'
          },
          {
            value: 2,
            desc: '已提交'
          },
          {
            value: 3,
            desc: '已撤销'
          }
        ],
        remark: ''
      }
    },
    methods: {
      formatColumnMap,
      async open(temp) {
        return new Promise(async(resolve) => {
          if (temp) {
            this.resolve = resolve
            if (this.type === 'get') {
              const res = await callarBottledetail({
                invenBillCode: temp.invenBillCode
              })
              this.tableData = res.data
              if (this.tableData.length > 0) {
                this.remark = this.tableData[0].remark
              }
            } else {
              const res = await queryReturnBottledetail({
                invenBillCode: temp.invenBillCode
              })
              this.detailList = res.data.detailList
              this.excepList = res.data.excepList
              this.remark = res.data.remark
            }
            this.visible = true
          }
        })
      },
      reset() {
        this.tableData = []
      }
    }
  }
</script>

<style lang="scss" scoped>
.title {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
}
</style>
